<script setup lang="ts">
import p1 from "@@/assets/images/layouts/logo.png"
import p2 from "@@/assets/images/layouts/tu3.png"
import avatar1 from "@@/assets/images/layouts/1202321.png"
import avatar2 from "@@/assets/images/layouts/1202320.png"
import Header from "@@/components/Head/index.vue"
import Footer from "@@/components/footer/index.vue"
import { useUserStore } from "@/pinia/stores/user.js"
import { onBeforeMount, ref} from "vue"
import {LoginRequestData, personalRequestData} from "@/pages/login/apis/type";
import {removeToken} from "@@/utils/cache/cookies";
import type {FormRules} from "element-plus";
import { loginApi } from "@/pages/login/apis";
import {
  getUserInfoApi,
  saveUserDataApi,
  saveUserAvatarApi,
  getUserFollowListApi,
  getUserCommentListApi,
  getUserPaymentListApi,
  getUserNoticeListApi,
  doUnLikeApi
} from "@/api/index";
const userStore = useUserStore()
const dialogVisible = ref(false)
const router = useRouter()
const goodHistoryList = ref([])
const collectHistoryList = ref([])
const commentHistoryList = ref([])
const makeCardHistoryList = ref([])
const noteHistoryList = ref([])
const paymentSuccessList = ref([])
const token = ref("")
const freeUserDialogVisible = ref(false)
const myAvatar = ref("")
const avatarDialogVisible = ref(false)
const tableData = [
  {
    id: 1,
    name: '头像一',
    is_selected: 0,
    address: avatar1
  },
  {
    id: 2,
    name: '头像二',
    is_selected: 1,
    address: avatar2
  }
]
const info = ref({
  user_id: userStore.getUserId().value,
  uid: userStore.getUserId().value,
  mobile: "",
  avatar: null,
  age: "",
  job: "",
  head_ico: "",
  username: "",
  true_name:  "",
  email: "",
  zhicheng: 0,
  company: "",
  congye: 0,
  edu: 0,
  hangye: 0,
  birthday: null,
  zhiwei: 0,
  sex: 0,
  is_vip: 0,
  expire_time: ''
})
const username = ref("")
const activeName = ref("first")
const activeName2 = ref("right_first")
const editState = ref(false)
/** 登录表单校验规则 */
const rules: FormRules = {
  username: [
    { required: true, message: "请输入昵称", trigger: "blur" }
  ],
  mobile: [
    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码' }
  ],
  email: [
    { pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: '请输入正确的邮箱' }
  ],
}
var validateMobilePhone = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('手机号不可为空'));
  } else {
    if (value !== '') {
      var reg=/^1[3456789]\d{9}$/;
      if(!reg.test(value)){
        callback(new Error('请输入有效的手机号码'));
      }
    }
    callback();
  }
};
/** 登录表单元素的引用 */
const loginFormRef = useTemplateRef("loginFormRef")
onBeforeMount(() => {
  // 组件已完成响应式状态设置，但未创建DOM节点
  // username.value = userStore.getUserName().value
  token.value = userStore.token
  if (token.value === '') {
    dialogVisible.value = true
  }
  console.log(info.value.user_id)
  getUserInfo()
  getUserFollowList()
})
// ctype  类型:1课程,2资讯,3语料,4问题,11原文卡,12要素卡,13摘要卡,14应询卡,5其他
// action 操作类型:1点赞,2踩一脚,3收藏,4打卡,5其他
function getUserFollowList() {
  const user_id= userStore.getUserId().value

  if (user_id !== 0 && parseInt(user_id) > 0) {
    getUserFollowListApi({ user_id , action: 1, page: 1, limit: 10, ctype: 0 }).then(({ data }) => {
      goodHistoryList.value = data
    })
    getUserFollowListApi({ user_id , action: 3, page: 1, limit: 10, ctype: 0 }).then(({ data }) => {
      collectHistoryList.value = data
    })
    getUserFollowListApi({ user_id , action: 4, page: 1, limit: 10, ctype: 0 }).then(({ data }) => {
      makeCardHistoryList.value = data
    })
    // action:6 = 评论，5：分享
    // ctype  类型:1课程,2资讯,3语料,4问题,11原文卡,12要素卡,13摘要卡,14应询卡,5其他
    getUserCommentListApi({ user_id , action: 6, page: 1, limit: 10, ctype: 0 }).then(({ data }) => {
      commentHistoryList.value = data
    })
    getUserPaymentListApi({ uid: user_id , status: 1, page: 1, limit: 10}).then(({ code, data }) => {

      if (code === 0) {
        paymentSuccessList.value = data
      }
    })
    getUserNoticeListApi({ uid: user_id , status: 1, page: 1, limit: 10}).then(({ code, data }) => {
      console.log(data)
      if (code === 0) {
        noteHistoryList.value = data
      }
    })
  }
}
function doUnLike(id, ctype, action) {
  const user_id= userStore.getUserId().value
  if (user_id !== 0 && parseInt(user_id) > 0) {
    const data2 = {
      source_id: id,
      user_id: userStore.getUserId().value,
      ctype,
      action: action
    }
    doUnLikeApi(data2).then(({ code }) => {
      console.log(code)
      if(code == 0) {
        ElMessage.success({
          message: "取消成功!",
          type: "success",
          duration: 2000
        })
        if (action === 1) {
          const user_id= userStore.getUserId().value
          getUserFollowListApi({ user_id , action: 1, page: 1, limit: 10, ctype: 0 }).then(({ data }) => {
            goodHistoryList.value = data
          })
        } else if (action === 3) {
          const user_id= userStore.getUserId().value
          getUserFollowListApi({ user_id , action: 3, page: 1, limit: 10, ctype: 0 }).then(({ data }) => {
            collectHistoryList.value = data
          })
        } else if (action === 4) {
          const user_id= userStore.getUserId().value
          getUserFollowListApi({ user_id , action: 4, page: 1, limit: 10, ctype: 0 }).then(({ data }) => {
            makeCardHistoryList.value = data
          })
        }
      }
    }).catch(() => {
      ElMessage.error({
        message: "取消点赞失败",
        type: "warning",
        duration: 2000
      })
    })
  }

}
function getUserInfo() {
  const uid = userStore.getUserId().value
  if (uid !== 0 && parseInt(uid) > 0) {
    getUserInfoApi({ uid }).then(({ data }) => {
      info.value = data
      info.value.user_id = userStore.getUserId().value
      username.value = data.name
      if(info.value.avatar == "1") {
        myAvatar.value = avatar1
      } else if (info.value.avatar == "2") {
        myAvatar.value = avatar2
      } else {
        myAvatar.value = p2
      }
      setTimeout(() => {
        if (info.value.is_vip === 0) {
          freeUserDialogVisible.value = true
        }
      }, 5000)
    })
  }
}
function showAvatar() {
  avatarDialogVisible.value = true
}
function showSave() {
  editState.value = true
}
function hideSave() {
  editState.value = false
}
/** 保存信息 */
function handleSave() {
  const user_id= userStore.getUserId().value
  if (user_id !== 0 && parseInt(user_id) > 0) {
    loginFormRef.value?.validate((valid) => {
      if (!valid) {
        ElMessage.error({
          message: "表单验证失败!",
          type: "warning",
          duration: 2000
        })
        return
      }
      info.value.user_id = user_id
      info.value.uid = user_id
      saveUserDataApi(info.value).then(({ code }) => {
        console.log(code)
        if(code == 0) {
          ElMessage.success({
            message: "保存信息成功!",
            type: "success",
            duration: 2000
          })
        }
      }).catch(() => {
        ElMessage.error({
          message: "验证失败",
          type: "warning",
          duration: 2000
        })
      })
    })
  }
}

function logout() {
  token.value = ""
  username.value = ""
  userStore.setUserId(0)
  removeToken()
  userStore.setToken("") // token-admin
  userStore.setUsername("")
}
function handleClickTabs(tab) {
  console.log(tab)
}
function handleClickTabs2(tab) {
  console.log(tab)
}
function handleUpload(res) {
  console.log(res)
  if(res.code == 0) {
    ElMessage.success({
      message: "上传成功!",
      type: "success",
      duration: 2000
    })
  }
}

function selectAvatar(id) {
  console.log(id)
  if(id == 1) {
    myAvatar.value = avatar1
  } else if (id == 2) {
    myAvatar.value = avatar2
  } else {
    myAvatar.value = p2
  }
  info.value.head_ico = id
  const data = {
    uid: userStore.getUserId().value,
    img: id
  }
  saveUserAvatarApi(data).then(({ code }) => {
    console.log(code)
    if(code == 0) {
      ElMessage.success({
        message: "保存头像成功!",
        type: "success",
        duration: 2000
      })
    }
  }).catch(() => {
    ElMessage.error({
      message: "保存失败",
      type: "warning",
      duration: 2000
    })
  }).finally(() => {
  })
}
function buyVip () {
  router.push({
    path: '/quanyi'
  })
}
</script>

<template>
  <div class="login-container" style="height: auto;">
    <Header :activeId="4" />
    <div class="module-container">
      <div class="info">
        <div class="user-info-left">
          <div class="avatar">
            <div class="avatar-uploader">
              <div class="el-upload el-upload--text" tabindex="0">
                <img :src="myAvatar" class="img1" v-if="info.user_id > 0" />
                <el-button type="default" v-if="info.user_id > 0" style="opacity: 0;position: absolute;height: 100px;width:100px;top: 88px;" @click="showAvatar()" >修改头像</el-button>
              </div>
            </div>
          </div>
          <div class="user-info">
            <div class="user-name">
              <i class="user-name-icon" />
              <span class="line1">{{ username }}</span>
              <i class="user-name-editor" />
            </div>

            <div class="user-phone">
              <i />
              <span>{{info.true_name}}</span>
            </div>
          </div>
        </div>
        <div class="line2"></div>
        <div class="user-info-right">
          <div class="user-info-right-name ">
            欢迎您，
            <span>{{ username }}同学！</span>
          </div>
          <!-- <div class="user-info-right-chengjiu line1">
            <div>
              <div class="user-info-right-chengjiu-item">
                看到您学习了
                <span>1</span> 学时，称得上
                <span>本周学习了1个学时</span> ；
              </div>
            </div>
          </div>-->
        </div>
      </div>
      <el-dialog title="修改头像" v-model="avatarDialogVisible" :visible.sync="avatarDialogVisible" width="460px">
        <el-table :data="tableData" border>
          <el-table-column label="头像" prop="name" width="100"></el-table-column>
          <el-table-column label="图片" prop="address" min-width="100">
            <template v-slot="{row, $index}">
              <img :src="row.address" width="100" height="100" />
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="id" width="100">
              <!-- 选择头像 -->
            <template  v-slot="{row, $index}">
              <el-button @click="selectAvatar(row.id)" >选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <div class="pms-content">
        <div class="pms-content-left">
          <div class="user-info-modify" >
            <div style="width:100%;height: 2px;"></div>
            <el-form ref="loginFormRef"  v-if="info.user_id > 0" :model="info" style="min-width: 500px;" label-width="60px" :rules="rules" >
              <div class="data_items">
                <div class="data_item">
                <el-form-item label="姓名" prop="true_name" label-position="top" >
                  <div v-if="!editState">
                    <el-input placeholder="未填写" disabled v-model="info.true_name"></el-input>
                  </div>
                  <div v-if="editState">
                    <el-input placeholder="请输入姓名" v-model="info.true_name"></el-input>
                  </div>
                </el-form-item>
              </div>
              <div class="data_item">
                <el-form-item label="性别" prop="sex" label-position="top" >
                  <div v-if="!editState">
                    <el-select disabled v-model="info.sex" style="width: 190px">
                      <el-option label="未填写" :value="0"></el-option>
                      <el-option label="男" :value="1"></el-option>
                      <el-option label="女" :value="2"></el-option>
                    </el-select>
                  </div>
                  <div v-if="editState">
                    <el-select v-model="info.sex" style="width: 190px" placeholder="请选择性别">
                      <el-option label="男" :value="1"></el-option>
                      <el-option label="女" :value="2"></el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </div>
            </div>
            <div class="data_items">
              <div class="data_item">
                <el-form-item label="生日" prop="birthday" label-position="top" >
                  <div v-if="!editState">
                    <el-date-picker
                      v-model="info.birthday"
                      disabled
                      type="date"
                      placeholder="选择生日日期"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      style="width: 100%;"
                    />
                  </div>
                  <div v-if="editState">
                    <el-date-picker
                      v-model="info.birthday"
                      type="date"
                      placeholder="选择生日日期"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      style="width: 100%;"
                    />
                  </div>
              </el-form-item>
              </div>
              <div class="data_item">
                <el-form-item label="手机号码" prop="mobile" label-position="top" >
                  <div v-if="!editState">
                    <el-input placeholder="未填写" disabled v-model="info.mobile"></el-input>
                  </div>
                  <div v-if="editState">
                    <el-input placeholder="请输入手机号码" v-model="info.mobile"></el-input>
                  </div>
                </el-form-item>
              </div>
            </div>
            <div class="data_items">
              <div class="data_item">
                <el-form-item label="邮箱" prop="email" label-position="top" >
                  <div v-if="!editState">
                    <el-input placeholder="未填写" disabled v-model="info.email"></el-input>
                  </div>
                  <div v-if="editState">
                    <el-input placeholder="请输入邮箱" v-model="info.email"></el-input>
                  </div>
                </el-form-item>
              </div>
              <div class="data_item">
                <el-form-item label="行业" label-position="top" aria-label="left" prop="hangye">
                  <div v-if="!editState">
                    <el-select v-model="info.hangye" disabled style="width: 190px" >
                      <el-option label="未填写" :value="0"></el-option>
                      <el-option label="教育" :value="1"></el-option>
                      <el-option label="医疗" :value="2"></el-option>
                      <el-option label="金融" :value="3"></el-option>
                      <el-option label="保险" :value="4"></el-option>
                      <el-option label="其他" :value="5"></el-option>
                    </el-select>
                  </div>
                  <div v-if="editState">
                    <el-select v-model="info.hangye" style="width: 190px" placeholder="请选择行业信息">
                      <el-option label="请选择" :value="0"></el-option>
                      <el-option label="教育" :value="1"></el-option>
                      <el-option label="医疗" :value="2"></el-option>
                      <el-option label="金融" :value="3"></el-option>
                      <el-option label="保险" :value="4"></el-option>
                      <el-option label="其他" :value="5"></el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </div>
            </div>
            <div class="data_items">
              <div class="data_item">
                <el-form-item label="单位" label-position="top"  prop="company">
                  <div v-if="!editState">
                    <el-input placeholder="未填写" disabled v-model="info.company"></el-input>
                  </div>
                  <div v-if="editState">
                    <el-input placeholder="请输入公司名称" v-model="info.company"></el-input>
                  </div>
                </el-form-item>
              </div>
              <div class="data_item">
                <el-form-item label="职位" label-position="top" prop="zhiwei">
                  <div v-if="!editState">
                    <el-select v-model="info.zhiwei" disabled style="width:190px" >
                      <el-option label="未填写" :value="0"></el-option>
                      <el-option label="普通职员" :value="1"></el-option>
                      <el-option label="高级职员" :value="2"></el-option>
                    </el-select>
                  </div>
                  <div v-if="editState">
                    <el-select v-model="info.zhiwei" style="width:190px" placeholder="请选择职位">
                      <el-option label="请选择" :value="0"></el-option>
                      <el-option label="普通职员" :value="1"></el-option>
                      <el-option label="高级职员" :value="2"></el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </div>
            </div>
              <div class="data_items">
                <div class="data_item">
                  <el-form-item label="学历" label-position="top" prop="edu">
                    <div v-if="!editState">
                      <el-select v-model="info.edu" disabled style="width: 190px" >
                        <el-option label="未填写" :value="0"></el-option>
                        <el-option label="小学以下" :value="1"></el-option>
                        <el-option label="小学-初中" :value="2"></el-option>
                        <el-option label="高中" :value="3"></el-option>
                        <el-option label="本科" :value="4"></el-option>
                        <el-option label="硕士" :value="5"></el-option>
                        <el-option label="博士" :value="6"></el-option>
                      </el-select>
                    </div>
                    <div v-if="editState">
                      <el-select v-model="info.edu" style="width: 190px" placeholder="请选择学历">
                        <el-option label="小学以下" :value="1"></el-option>
                        <el-option label="小学-初中" :value="2"></el-option>
                        <el-option label="高中" :value="3"></el-option>
                        <el-option label="本科" :value="4"></el-option>
                        <el-option label="硕士" :value="5"></el-option>
                        <el-option label="博士" :value="6"></el-option>
                      </el-select>
                    </div>
                  </el-form-item>
                </div>
                <div class="data_item">

                </div>
              </div>
            <div class="data_items">

                <div class="data_item">
                  <el-form-item label="从业" label-position="top" prop="congye">
                    <div v-if="!editState">
                      <el-select v-model="info.congye" disabled style="width:190px">
                        <el-option label="未填写" :value="0"></el-option>
                        <el-option label="1-3年" :value="1"></el-option>
                        <el-option label="3-5年" :value="3"></el-option>
                        <el-option label="5-10年" :value="5"></el-option>
                        <el-option label="10-15年" :value="10"></el-option>
                        <el-option label="15-20年" :value="15"></el-option>
                        <el-option label="20年以上" :value="20"></el-option>
                      </el-select>
                    </div>
                    <div v-if="editState">
                      <el-select v-model="info.congye" style="width:190px" placeholder="请选择从业年限">
                        <el-option label="请选择从业年限" :value="0"></el-option>
                        <el-option label="1-3年" :value="1"></el-option>
                        <el-option label="3-5年" :value="3"></el-option>
                        <el-option label="5-10年" :value="5"></el-option>
                        <el-option label="10-15年" :value="10"></el-option>
                        <el-option label="15-20年" :value="15"></el-option>
                        <el-option label="20年以上" :value="20"></el-option>
                      </el-select>
                    </div>
                  </el-form-item>
                </div>
                <div class="data_item">
                  <div style="width: 100%;display: flex;flex-direction: row; justify-content:  flex-end;">
                    <div  style="display:flex;flex-direction: column;justify-content: flex-end;margin-right: 10px;" >
                      <el-button type="default" aria-disabled="false"  @click="hideSave" >
                        <span> 取 消 </span>
                      </el-button>
                    </div>
                    <div style="display:flex;flex-direction: column">
                      <div>
                        <el-button type="primary" aria-disabled="false" @click="showSave" >
                        <span> 修 改 </span>
                        </el-button>
                      </div>
                      <div style="margin-top: 5px;">
                        <el-button type="primary" aria-disabled="false" @click="handleSave" >
                          <span> 保 存 </span>
                        </el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </el-form>
          </div>
          <div class="xxgj-box">
            <div class="row1" style="margin-bottom: 6px;">
              <div class="text1">学习轨迹</div>
              <el-tooltip class="item" effect="dark" placement="right">
                <template #content>
                  <div>包含收藏，点赞，打卡，评论和笔记五大功能，</div>
                  <div>每一次的互动都是对您知识的探索和热爱，我们将这些宝贵的瞬间串联起来，</div>
                  <div>帮助您回顾学习过程。见证自己的进步，在这里，每一步都算数，让学习变得更加有趣，有迹可循。</div>
                </template>
                <img src="" class="img1 el-tooltip__trigger el-tooltip__trigger">
              </el-tooltip>
            </div>
            <div class="tab" style="width: 100%;height: 100%;min-width: 440px;">
              <el-tabs v-model="activeName" @tab-click="handleClickTabs" style="width: 100%;">
                <el-tab-pane label="收藏" name="first">
                  <ul class="xxgj-content">
                    <li class="item" v-for="item_like in collectHistoryList" :key="item_like.id">
                      <div class="text1" style="width:50px;">
                        {{item_like.ctype == 1 ? '课程' : item_like.ctype == 2 ? '资讯' : item_like.ctype == 11 ? '原文卡' : item_like.ctype == 13 ? '摘要卡' : '要素卡'}}
                      </div>
                      <div class="text1" style="text-decoration: underline;cursor: pointer;">
                        {{item_like.action_title.substring(0, 20)}}
                      </div>
                      <div class="text2" />
                      <div class="text3">
                        {{item_like.create_time.replace('-', '.').replace('-', '.')}}
                      </div>
                      <div class="text4" @click="doUnLike(item_like.source_id, item_like.ctype,3)">
                        取消
                      </div>
                    </li>
                  </ul>
                </el-tab-pane>
                <el-tab-pane label="点赞" name="second">
                  <ul class="xxgj-content">
                    <li class="item" v-for="item_like in goodHistoryList" :key="item_like.id">
                      <div class="text1" style="width:50px;">
                        {{item_like.ctype == 1 ? '课程' : item_like.ctype == 2 ? '资讯' : item_like.ctype == 11 ? '原文卡' : item_like.ctype == 13 ? '摘要卡' : '要素卡'}}
                      </div>
                      <div class="text1" style="text-decoration: underline;cursor: pointer;">
                        {{item_like.action_title ? item_like.action_title.substring(0, 20) : ''}}
                      </div>
                      <div class="text2" />
                      <div class="text3">
                        {{item_like.create_time.replace('-', '.').replace('-', '.')}}
                      </div>
                      <div class="text4" @click="doUnLike(item_like.source_id, item_like.ctype,1)">
                        取消
                      </div>
                    </li>

                  </ul>
                </el-tab-pane>
                <el-tab-pane label="打卡" name="third">
                  <ul class="xxgj-content">
                    <li class="item" v-for="item_like in makeCardHistoryList" :key="item_like.id">
                      <div class="text1" style="width:50px;">
                        {{item_like.ctype == 1 ? '课程' : item_like.ctype == 2 ? '资讯' : item_like.ctype == 11 ? '原文卡' : item_like.ctype == 13 ? '摘要卡' : '要素卡'}}
                      </div>
                      <div class="text1" style="text-decoration: underline;cursor: pointer;">
                        {{item_like.action_title ? item_like.action_title.substring(0, 20) : ''}}
                      </div>
                      <div class="text2" />
                      <div class="text3">
                        {{item_like.create_time.replace('-', '.').replace('-', '.')}}
                      </div>
                    </li>
                  </ul>
                </el-tab-pane>
                <el-tab-pane label="评论" name="fourth">
                  <ul class="xxgj-content">
                    <li class="item" v-for="item_like in commentHistoryList" :key="item_like.id">
                      <div class="text1" style="width:50px;">
                        {{item_like.ctype == 1 ? '课程' : item_like.ctype == 2 ? '资讯' : item_like.ctype == 11 ? '原文卡' : item_like.ctype == 13 ? '摘要卡' : '要素卡'}}
                      </div>
                      <div class="text1" style="text-decoration: underline;cursor: pointer;">
                        {{item_like.contents ? item_like.contents.substring(0, 20) : ''}}
                      </div>
                      <div class="text2" />
                      <div class="text3">
                        {{item_like.create_time.replace('-', '.').replace('-', '.')}}
                      </div>
                    </li>
                  </ul>
                </el-tab-pane>
                <el-tab-pane label="笔记" name="five">
                  <ul class="xxgj-content">
                    <li class="item" v-for="item_like in noteHistoryList" :key="item_like.id">
                      <div class="text1" style="width:50px;">
                        {{item_like.ctype == 1 ? '课程' : item_like.ctype == 2 ? '资讯' : item_like.ctype == 11 ? '原文卡' : item_like.ctype == 13 ? '摘要卡' : '要素卡'}}
                      </div>
                      <div class="text1" style="text-decoration: underline;cursor: pointer;">
                        {{item_like.contents ? item_like.contents.substring(0, 30) : ''}}
                      </div>
                      <div class="text2" />
                      <div class="text3">
                        {{item_like.create_time.replace('-', '.').replace('-', '.')}}
                      </div>
                      <div class="text4" @click="doUnLike(item_like.source_id,5, 5)">
                        取消
                      </div>
                    </li>
                  </ul>
                </el-tab-pane>
              </el-tabs>
            </div>

          </div>
        </div>
        <div class="pms-content-right">
          <div class="dygl-box">
            <div class="row1">
              <div class="text1">
                订阅管理
              </div>
              <el-tooltip effect="dark"  class="item"  placement="right">
                <template #content>
                  <div>亲爱的同学，在这里，您可以轻松管理您的订阅内容，</div>
                  <div>让您的学习之路更加高效，便捷。</div>
                </template>
                <img src="" class="img1 el-tooltip__trigger el-tooltip__trigger">
              </el-tooltip>
            </div>
            <div class="dygl-content">
              <div class="item" v-if="paymentSuccessList.length > 0" v-for="item in paymentSuccessList">
                <img src="" class="img1">
                <div class="text1">
                  体验版权益
                </div>
                <div class="text2">
                  购买时间：{{item.time}}
                </div>
                <div class="text2">
                  截止时间：2025.12.31-17:00
                </div>
              </div>
            </div>
          </div>
          <div class="xxcj-box">
            <div class="row1">
              <div class="text1"> 学习成就 </div>
              <el-tooltip class="item" effect="dark"  placement="right">
                <template #content>
                  <div>在这里，您可以看到您的学习成果，包括课程完成度，</div>
                  <div>互动积分，荣誉证书。 我们相信，每一个小小的成就，都是您前进的动力。</div>
                  <div>让我们一起，用成就感激发无线潜能，助您在化妆品行业的职业生涯一路向前。</div>
                </template>
                <img src="" class="img1 el-tooltip__trigger el-tooltip__trigger">
              </el-tooltip>
            </div>
            <el-tabs v-model="activeName2" @tab-click="handleClickTabs2" style="width: 100%;">
              <el-tab-pane label="成就记录" name="right_first">
                <div class="xxcj-content">
                  <div class="item">
                    <div class="text1">
                      数据 - 获得成就 - 本周学习了
                      <span class="text2">1</span> 学时，
                      <template>
                        查看
                        <span class="text3">勋章</span>
                      </template>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="成就计划" name="second">
                <div class="xxcj-content">
                  <div class="item">
                    <div class="text1">
                      成就计划 - 勋章
                      <span class="text2">2</span> 学时，
                      <template>
                        查看
                        <span class="text3">勋章</span>
                      </template>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
            <!-- <div class="xxcj-content">
              <div class="item">
                <div class="text1">
                  数据-获得成就 - 本周学习了
                  <span class="text2">1</span> 学时，
                  <template>
                    查看
                    <span class="text3">勋章</span>
                  </template>
                </div>
                <div class="text3" />
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <Footer />
    <el-dialog v-model="freeUserDialogVisible" title="用户信息"  class="custom-dialog" center top="14vh" :close-on-click-modal="false"
               :close-on-press-escape="true" borderRadius="8px"
               append-to-body :width="650" >
      <div  style="width:80%; margin: 0 auto">
        <div class="title-left">
          <div class="icon icon1" style="height: 10px; width: 60px;" />
          <div class="title">
            <div style="display: flex;flex-direction: column;">
              <div style="font-size: 14px;color: #0e2442;">您是saca体验用户, 90天后到期，<el-button type="primary" @click="buyVip()">购买正式会员</el-button></div>
              <div style="font-size: 12px;color: #0E6EF6;">购买正式会员可获得更多功能,到期时间是 {{info.expire_time}}</div>
            </div>
          </div>
        </div>
        <div style="width: 100%;height: 330px;display: flex;flex-direction: column;">
          <div style="width: 100%;height: 330px;display: flex;flex-direction: row;">
            <div style="width: 46%;height: 130px;padding: 10px;">
              用户权益1用户权益1用户权益1用户权益1
            </div>
            <div style="width: 46%;height: 130px;padding: 10px;">
              用户权益3用户权益3用户权益3用户权益3
            </div>
          </div>
          <div style="width: 100%;height: 130px;display: flex;flex-direction: row;">
            <div style="width: 46%;height: 130px;padding: 10px;">
              用户权益2用户权益2用户权益2用户权益2
            </div>
            <div style="width: 46%;height: 130px;padding: 10px;">
              用户权益4用户权益4用户权益4用户权益4
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div style="display: flex;justify-content: center;" >
          <el-button size="default" style="width:80px;margin-bottom: 10px;" @click="freeUserDialogVisible = false">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<style src="@/pages/PMS/style/index.css"  scoped></style>
<style>
.data_items {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  justify-content: space-around;
  .data_item {
    width: 42%;
    height: 68px;
  }
}
.el-tabs__nav-wrap:after {
  height: 1px;
}
.el-tabs__active-bar {
  height: 1px;
}
.el-form-item--label-top .el-form-item__label {
  font-weight: 700;
}
.el-tabs__header {
  margin: 0 0 6px;
}
</style>
